<template>
  <div>
    <home>
      <div slot="conter" class="topaa" data-attr="商品首页">
        <a href="#">
          <h2>商品首页</h2>
        </a>
      </div>
      <div slot="nav-menu">
        <el-submenu index="1-1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>商品系列</span>
          </template>
          <el-menu-item-group>
            <template slot="title">专场</template>
            <el-menu-item index="1-2">商品专场</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group index="1-3" title="添加系列">
            <template slot="title">添加列表</template>
            <el-menu-item index="1-4-2" @click="AdditemClick('/auction/item/')">添加商品</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="1-1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>优惠卷系列</span>
          </template>
          <el-menu-item-group>
            <template slot="title">优惠卷场</template>
            <el-menu-item index="1-3-2" @click="AddcouponClick()">优惠卷中心</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </div>
      <div slot="context">
        <el-page-header @back="goBack" content="商品页面">
        </el-page-header>
        <el-card class="box-card">
          <div class="text item"><h2>拍卖专场:{{auction_item_list.title}}</h2></div>
          <div class="text">预展时间:{{auction_item_list.auction_time[0] | renderTime}}-{{auction_item_list.auction_time[1]
            | renderTime}}
          </div>
          <div class="text">拍卖时间:{{auction_item_list.preview_time[0] | renderTime}}-{{auction_item_list.preview_time[1]
            | renderTime}}
          </div>
          <div class="text status">拍卖状态：
            <el-tag size="medium" :type="tag[auction_item_list.status]">{{auction_item_list.status_title}}</el-tag>
          </div>
          <div class="text deposit">全场保证金：{{auction_item_list.deposit}}￥</div>
        </el-card>
        <el-table :data="auction_item_result" style="width: calc(100% - 201px);position: absolute">
          <el-table-column
                  prop="title"
                  label="商品名称"
                  width="300">
          </el-table-column>
          <el-table-column
                  prop="status_name"
                  label="商品状态"
                  width="150">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>商品状态: {{ scope.row.status_name }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium" :type="tag[scope.row.status]">{{ scope.row.status_name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
                  sortable
                  prop="start_price"
                  label="起拍价"
                  width="150">
          </el-table-column>
          <el-table-column
                  sortable
                  prop="reserve_price"
                  label="参考低价"
                  width="150">
          </el-table-column>
          <el-table-column
                  sortable
                  prop="highest_price"
                  label="参考高价"
                  width="150">
          </el-table-column>
          <el-table-column
                  sortable
                  prop="deposit"
                  label="单品保证金"
                  width="150">
          </el-table-column>
          <el-table-column
                  sortable
                  prop="unit"
                  label="加价幅度"
                  width="150">
          </el-table-column>
          　　
          <el-table-column
                  label="商品封面"
                  width="200">
            <template scope="scope">
              　　　　 <img :src="scope.row.cover" width="100" height="100" class="head_pic"/>
            </template>
          </el-table-column>

          <el-table-column
                  align="center">
            <template slot="header" slot-scope="scope">
              <el-input
                      v-model="text"
                      size="mini"
                      placeholder="输入关键字搜索">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </template>
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="handleClick(scope.row.id)">拍品
              </el-button>
              <el-button
                      type="primary"
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row.id)">编辑
              </el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </home>
  </div>
</template>

<script>
  import Home from "./Home";
  import {DeleteHomeAuction} from "network/home"

  export default {
    name: "HomeItemIndexAuction",
    components: {Home},
    data() {
      return {
        auction_item_list: [],
        tag: {
          1: 'info',
          2: '',
          3: 'success',
          4: 'warning',
          5: 'danger'
        },
        text: '',
        activeName: '1'
      }
    },
    created() {
      // 获取对象传来的参数解析
      let auction_item = JSON.parse(decodeURIComponent(this.$route.query.goods));
      this.auction_item_list = auction_item
      console.log(this.auction_item_list);
    },
    methods: {
      handleEdit(index, id) {
        // console.log(index, id);
        let goods = this.$route.query.goods
        this.$router.push({
          path: '/auction/item/edit/' + id, query: {
            goods
          }
        })
      },
      handleDelete(index, id) {
        let iid = this.$route.params.iid
        DeleteHomeAuction(id, iid).then(res => {
          console.log(res);
          this.auction_item_list.goods.splice(index, 1)
          let goods = encodeURIComponent(JSON.stringify(this.auction_item_list))
          this.$router.push({
            query: {
              goods
            }
          }).catch()
        })
      },
      handleClick(id) {
        let goods = this.$route.query.goods
        let iid = this.auction_item_list.id
        this.$router.push({
          path: "/auction/index/" + iid + '/' + id,
          query: {
            goods
          }
        })
        console.log(id);
      },
      AdditemClick(url) {
        let iid = this.$route.params.iid
        let auction_list = this.$route.query.goods
        this.$router.push({
          path: url + iid, query: {
            goods: auction_list
          }
        }).catch(err => {
        })
      },
      goBack() {
        this.$router.go(-1)
      },
      AddcouponClick() {
        let aid = this.$route.params.iid
        this.$router.push({path: '/coupon/' + aid})
        console.log(aid);
      }
    },
    filters: {
      renderTime: function (value) {
        return new Date(+new Date(value) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      }
    },
    computed: {
      auction_item_result() {
        let kw = this.text
        if (this.text) {
          let auction_list = this.auction_item_list.goods.filter(item => {
            if (item.title.indexOf(kw) >= 0) {
              return true
            } else {
              return false
            }
          })
          return auction_list
        } else {
          return this.auction_item_list.goods
        }
      },
    },


  }
</script>

<style scoped>
  .el-page-header {
    line-height: 35px;
    background: #ffffff;
    height: 35px;
  }

  /*.demo-form-inline {*/
  /*  background: #ffffff;*/
  /*}*/
  .text {
    font-size: 14px;
    text-align: center;
  }

  .item {
    padding: 18px 0;

  }

  .box-card {
    margin-bottom: 1px;
    /*width: 480px;*/
  }

  .status {
    text-align: left;
  }

  .deposit {
    text-align: right;
    color: #a3a3a5;
  }
</style>